<template>
  <div>
    <el-dialog title="提示" v-model="visible" width="50%" @close="onClose">
      <template #title>
        <p class="dialog-title">标题</p>
      </template>
      <body>
        <div class="left">
          <el-tree
            accordion
            node-key="label"
            :default-expanded-keys="'植物妈妈有办法'"
            :data="treeData"
            :props="defaultProps"
            @node-click="handleNodeClick"
          >
            <template #default="{ node, data }">
              <span class="custom-tree-node" :style="{'background-color':data.label == '植物妈妈有办法'?'rgb(61,154,184)':''}">
                <span :style="{'color':data.label == '植物妈妈有办法'?'rgb(255,255,255)':''}">{{ node.label }}</span>
                <span
                  v-if="!data.children"
                  :style="{ color: checkWorkStateColor(data.state) }"
                >
                  <span :style="{'color':data.label == '植物妈妈有办法'?'rgb(255,255,255)':''}">{{ data.state }}</span>
                </span>
              </span>
            </template>
          </el-tree>
        </div>
        <div class="right">
          <div class="video">
            <video
              controls
              height="100%"
              width="100%"
              controlslist="nodownload"
              loopobject-fit:cover
              crossOrigin="anonymous"
              id="videoElement"
              x5-playsinline=""
              playsinline=""
              webkit-playsinline=""
              :src="videoSrc"
              type="video/mp4"
              preload="auto"
            ></video>
          </div>
          <div class="file">
            <div></div>
          </div>
        </div>
      </body>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { ref, defineComponent, toRefs, reactive, watch } from "vue";
import checkColor from "@/views/data/checkColor";
interface Props {
  dialogVisible: boolean;
}
interface State {
  visible: boolean;
}
interface Tree {
  label: string;
  state?: string;
  videoSrc?: string;
  children?: Tree[];
}
export default defineComponent({
  name: "Dialog",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, context) {
    const { dialogVisible } = toRefs(props as Props);
    const parent = { ...context };
    const state = reactive<State>({
      visible: dialogVisible.value,
    });
    watch(
      dialogVisible,
      (newValue) => {
        state.visible = newValue;
      },
      { immediate: true }
    );
    const onClose = () => {
      parent.emit("update:dialogVisible", false);
    };
    const refreshTable = () => {
      parent.emit("refresh-table", "弹窗操作");
    };
    /**
     * 树形控件
     */
    const handleNodeClick = (data: Tree) => {
      console.log(data);
    };
    const treeData: Tree[] = [
      {
        label: "语文",
        children: [
          {
            label: "部编版",
            children: [
              {
                label: "二年级上",
                children: [
                  {
                    label: "小蝌蚪找妈妈",
                    state: "未提交",
                    videoSrc:
                      "https://video19.ifeng.com/video09/2023/12/29/p7146478004850402166-106-205601.mp4?reqtype=tsl",
                  },
                  {
                    label: "我是什么",
                    state: "未参与",
                  },
                  {
                    label: "植物妈妈有办法",
                    state: "已提交(1)",
                  },
                  {
                    label: "口语交际:有趣的动物",
                    state: "未提交",
                  },
                  {
                    label: "语文园地一",
                    state: "未提交",
                  },
                  {
                    label: "快乐读书吧",
                    state: "未提交",
                  },
                  {
                    label: "识字",
                    state: "未提交",
                  },
                  {
                    label: "1场景歌",
                    state: "未参与",
                  },
                  {
                    label: "2树之歌",
                    state: "未参与",
                  },
                  {
                    label: "3拍手歌",
                    state: "已提交(1)",
                  },
                  {
                    label: "4田家四季歌",
                    state: "已提交(1)",
                  },
                ],
              },
            ],
          },
        ],
      },
      {
        label: "Level one 2",
        children: [
          {
            label: "Level two 2-1",
            children: [
              {
                label: "Level three 2-1-1",
              },
            ],
          },
          {
            label: "Level two 2-2",
            children: [
              {
                label: "Level three 2-2-1",
              },
            ],
          },
        ],
      },
      {
        label: "Level one 3",
        children: [
          {
            label: "Level two 3-1",
            children: [
              {
                label: "Level three 3-1-1",
              },
            ],
          },
          {
            label: "Level two 3-2",
            children: [
              {
                label: "Level three 3-2-1",
              },
            ],
          },
        ],
      },
    ];
    const defaultProps = {
      children: "children",
      label: "label",
    };
    /**
     * 提交状态显示颜色
     */
    const { checkWorkStateColor } = checkColor();
    /**
     * 显示视频
     */
    const videoSrc = ref(
      "https://video19.ifeng.com/video09/2023/12/29/p7146478004850402166-106-205601.mp4?reqtype=tsl"
    );
    return {
      ...toRefs(state),
      onClose,
      refreshTable,
      defaultProps,
      treeData,
      handleNodeClick,
      checkWorkStateColor,
      videoSrc,
    };
  },
});
</script>
<style lang="scss" scoped>
.dialog-title {
  font-size: 0.1rem;
  font-weight: bold;
  text-align: center;
}
body {
  display: flex;
  .left {
    width: 35%;
  }
  .right {
    width: 65%;
    .video{
      padding: 0 10%;
    }
    .file{
      display: flex;
    }
  }
}
.custom-tree-node {
  display: flex;
  justify-content: space-between;
  width: 100%;
  line-height: 0.14rem;
  border-radius: 0.02rem;
  padding: 0 2%;
}
</style>
